<template>
  <div class="min-h-screen bg-gray-50">
    <div class="mx-auto max-w-[1440px] px-6 py-8">
      <!-- 顶部操作区保持不变 -->
		<div class="flex items-center justify-between mb-6">
		  <div class="flex items-center gap-4">
		    <h1 class="text-2xl font-medium">视频素材管理</h1>
		    <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="handleUpload">
		      <i class="el-icon-upload mr-1"></i>上传视频
		    </el-button>
		    <el-button class="!rounded-button whitespace-nowrap">
		      <i class="el-icon-link mr-1"></i>路径绑定
		    </el-button>
		  </div>
		  <div class="flex items-center gap-4">
		    <div class="relative">
		      <el-input
		        v-model="searchText"
		        placeholder="搜索视频名称、标签"
		        class="w-64"
		      >
		        <i slot="prefix" class="el-icon-search"></i>
		      </el-input>
		    </div>
		    <el-select v-model="sortBy" placeholder="排序方式" class="w-32">
		      <el-option label="上传时间" value="uploadTime" />
		      <el-option label="使用频率" value="useFrequency" />
		    </el-select>
		  </div>
		</div>
      <!-- 二级标签筛选区 -->
      <div class="bg-white rounded-lg p-6 mb-6">
        <!-- 一级标签 -->
        <div class="flex gap-4 mb-4 pb-2 overflow-x-auto border-b">
          <el-button
            v-for="primary in primaryTags"
            :key="primary.id"
            :class="[
              '!rounded-button',
              currentPrimary === primary.id ? '!bg-blue-100 !text-primary' : ''
            ]"
            @click="switchPrimary(primary.id)"
          >
            {{ primary.name }}
          </el-button>
        </div>

        <!-- 二级标签 -->
        <div class="flex flex-wrap gap-2">
          <el-button
            v-for="tag in currentSecondaryTags"
            :key="tag.id"
            :class="[
              '!rounded-button',
              selectedTags.includes(tag.id) ? '!bg-blue-100 !text-primary' : ''
            ]"
            @click="toggleTag(tag.id)"
          >
            <i v-if="tag.icon" :class="['mr-1', tag.icon]"></i>
            {{ tag.name }}
          </el-button>
        </div>
      </div>

      <div class="grid grid-cols-4 gap-6">
        <div
          v-for="video in videos"
          :key="video.id"
          class="bg-white rounded-lg overflow-hidden group relative"
        >
          <div class="relative aspect-video">
            <!-- <img
              :src="video.thumbnail"
              class="w-full h-full object-cover"
              :alt="video.title"
            /> -->
			<video :src="video.videoUrl"></video>
            <div class="absolute top-2 right-2">
              <el-dropdown trigger="hover">
                <el-button class="!rounded-button whitespace-nowrap">
                  <i class="el-icon-more"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <i class="el-icon-edit"></i>编辑
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-view"></i>查看
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-delete"></i>删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
              {{ video.duration }}
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-base font-medium mb-2 truncate">{{ video.userLabel }}</h3>
            <div class="flex items-center justify-between text-sm text-gray-500 mb-2">
              <span>{{ video.size }}</span>
              <span>{{ video.uploadTime }}</span>
            </div>
            <div class="flex flex-wrap gap-1">
				<el-tag
				  size="small"
				  class="!rounded-button whitespace-nowrap"
				>
				  {{ video.firstLabel }}
				</el-tag>
				<el-tag
				  size="small"
				  class="!rounded-button whitespace-nowrap"
				>
				  {{ video.secondLabel }}
				</el-tag>
              <!-- <el-tag
                v-for="tag in video.tags"
                :key="tag"
                size="small"
                class="!rounded-button whitespace-nowrap"
              >
                {{ tag }}
              </el-tag> -->
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="flex justify-center mt-8">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 新增二级标签相关数据
      primaryTags: [
        {
          id: 'product',
          name: '产品分类',
          children: [
            { id: 1, name: '手机' },
            { id: 2, name: '电脑' },
            { id: 3, name: '平板' },
            { id: 4, name: '智能穿戴' },
            { id: 5, name: '智能家居' }
          ]
        },
        {
          id: 'content',
          name: '内容分类',
          children: [
            { id: 6, name: '产品讲解' },
            { id: 7, name: '功能演示' },
            { id: 8, name: '使用教程' },
            { id: 9, name: '开箱评测' }
          ]
        },
        {
          id: 'gender',
          name: '性别分类',
          children: [
            { id: 10, name: '男性', icon: 'el-icon-male' },
            { id: 11, name: '女性', icon: 'el-icon-female' },
            { id: 12, name: '通用', icon: 'el-icon-user' }
          ]
        }
      ],
      currentPrimary: 'product',
      selectedTags: [],
	  videos: [
	    {
	      id: 1,
	      title: '新品 XPhone 15 Pro Max 详细功能展示',
	      thumbnail: 'https://ai-public.mastergo.com/ai/img_res/a1b652508273aa2ec2ad500e51038477.jpg',
	      duration: '05:32',
	      size: '125MB',
	      uploadTime: '2024-01-15',
	      tags: ['手机', '产品讲解', '新品']
	    },
	    {
	      id: 2,
	      title: 'XBook Air 2024 开箱体验',
	      thumbnail: 'https://ai-public.mastergo.com/ai/img_res/3f15bf99d3bb736ba90ac9d571c03b53.jpg',
	      duration: '08:15',
	      size: '256MB',
	      uploadTime: '2024-01-14',
	      tags: ['电脑', '开箱评测']
	    },
	    {
	      id: 3,
	      title: 'XPad Mini 6 使用技巧大全',
	      thumbnail: 'https://ai-public.mastergo.com/ai/img_res/71334b1f304ac2a3ce306e936987b272.jpg',
	      duration: '12:45',
	      size: '320MB',
	      uploadTime: '2024-01-13',
	      tags: ['平板', '使用教程']
	    },
	    {
	      id: 4,
	      title: 'XWatch Series 9 健康监测功能详解',
	      thumbnail: 'https://ai-public.mastergo.com/ai/img_res/820fa7df2e4f9406cdd37961734a4630.jpg',
	      duration: '06:20',
	      size: '180MB',
	      uploadTime: '2024-01-12',
	      tags: ['智能穿戴', '功能演示']
	    }
	  ]
    };
  },
  computed: {
    currentSecondaryTags() {
      const current = this.primaryTags.find(p => p.id === this.currentPrimary);
      return current ? current.children : [];
    }
  },
  mounted() {
  	this.loadData()
  },
  methods: {
	  loadData(){
		  let data = {}
		  this.$http.post("/labelVideo/loadManyByPramas",data).then(res=>{
			  console.log(res)
			  this.videos = res.data
		  })
	  },
    switchPrimary(primaryId) {
      this.currentPrimary = primaryId;
      this.selectedTags = []; // 切换一级分类时清空已选
    },
    toggleTag(tagId) {
      const index = this.selectedTags.indexOf(tagId);
      if (index === -1) {
        this.selectedTags.push(tagId);
      } else {
        this.selectedTags.splice(index, 1);
      }
    },
    handleUpload() {
      // 处理上传逻辑
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.el-button.is-active {
  color: #409EFF;
  background-color: #ecf5ff;
  border-color: #b3d8ff;
}

.el-input {
  --el-input-inner-height: 40px;
}

.el-select {
  --el-select-input-focus-border-color: #409EFF;
}
.text-primary {
  color: #409EFF;
}
.border-b {
  border-bottom: 1px solid #e5e7eb;
}
</style>